<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>合拍街</title>
    <link href="../css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../iconfont/iconfont.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<header id="header">
    <a href="user_index.html" class="iconfont fl">&#xe63f;</a>
    <div class="title">我的订单</div>
    <a href="#" class="iconfont fr">&#xe6a0;</a>
</header>
<div class="content">
    <div class="user-order-tabs">
        <ul class="clearfix">
            <li><span id="all" class="now"><a href="javascript:tabs('all')">全部</a></span></li>
            <li><span id="mutually"><a href="javascript:tabs('mutually')">互免约拍</a></span></li>
            <li><span id="accept"><a href="javascript:tabs('accept')">待接受</a></span></li>
            <li><span id="shoot"><a href="javascript:tabs('shoot')">待拍摄</a></span></li>
            <li><span id="completed"><a href="javascript:tabs('completed')">已完成</a></span></li>
        </ul>
    </div>

    <div class="user-order-list">
        <div class="user-order-db mutually">
            <ul>
                <li class="clearfix">
                    <div class="fl portrait">
                        <img src="../images/user_mini.png" alt="">
                    </div>
                    <div class="fl information">
                        <h5>睡不醒的木鱼（上海奉贤）
                            <img src="../skin/xhdpi/sex_w.png" alt="">
                            <img src="../skin/xhdpi/sex_m.png" alt="">
                            <img src="../skin/xhdpi/phone_m.png" alt="">
                            <img src="../skin/xhdpi/authentication.png" alt="">
                        </h5>
                        <p>
                            <span>90后</span>
                            <span>双鱼座</span>
                            <span>希望互免</span>
                        </p>
                    </div>
                    <div class="clearfix"></div>
                    <p class="phone">13856786789</p>
                    <p class="time">2018年3月20日 15:30</p>
                    <div class="handle">
                        <a href="user_order_detail.html">查看详情并处理</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="user-order-db accept">
            <ul>
                <li class="clearfix">
                    <div class="fl portrait">
                        <img src="../images/user_mini.png" alt="">
                    </div>
                    <div class="fl information">
                        <h5>睡不醒的木鱼（上海奉贤）
                            <img src="../skin/xhdpi/sex_w.png" alt="">
                            <img src="../skin/xhdpi/sex_m.png" alt="">
                            <img src="../skin/xhdpi/phone_m.png" alt="">
                            <img src="../skin/xhdpi/authentication.png" alt="">
                        </h5>
                        <p>
                            <span>90后</span>
                            <span>双鱼座</span>
                            <span>希望互免</span>
                        </p>
                    </div>
                    <div class="clearfix"></div>
                    <p class="phone">13856786789</p>
                    <p class="time">2018年3月20日 15:30</p>
                    <div class="handle">
                        <a href="user_order_detail.html">查看详情并接受</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="user-order-db shoot">
            <ul>
                <li class="clearfix">
                    <div class="fl portrait">
                        <img src="../images/user_mini.png" alt="">
                    </div>
                    <div class="fl information">
                        <h5>睡不醒的木鱼（上海奉贤）
                            <img src="../skin/xhdpi/sex_w.png" alt="">
                            <img src="../skin/xhdpi/sex_m.png" alt="">
                            <img src="../skin/xhdpi/phone_m.png" alt="">
                            <img src="../skin/xhdpi/authentication.png" alt="">
                        </h5>
                        <p>
                            <span>90后</span>
                            <span>双鱼座</span>
                            <span>希望互免</span>
                        </p>
                    </div>
                    <div class="clearfix"></div>
                    <p class="phone">13856786789</p>
                    <p class="time">2018年3月20日 15:30</p>
                    <div class="handle">
                        <a href="user_order_detail.html">查看详情并拍摄</a>
                    </div>
                </li>
            </ul>
        </div>
        <div class="user-order-db completed">
            <ul>
                <li class="clearfix">
                    <div class="fl portrait">
                        <img src="../images/user_mini.png" alt="">
                    </div>
                    <div class="fl information">
                        <h5>睡不醒的木鱼（上海奉贤）
                            <img src="../skin/xhdpi/sex_w.png" alt="">
                            <img src="../skin/xhdpi/sex_m.png" alt="">
                            <img src="../skin/xhdpi/phone_m.png" alt="">
                            <img src="../skin/xhdpi/authentication.png" alt="">
                        </h5>
                        <p>
                            <span>90后</span>
                            <span>双鱼座</span>
                            <span>希望互免</span>
                        </p>
                    </div>
                    <div class="clearfix"></div>
                    <p class="phone">13856786789</p>
                    <p class="time">2018年3月20日 15:30</p>
                </li>
            </ul>
        </div>
    </div>
</div>

<footer id="footer" class="foot">
    <ul>
        <li>
            <a class="home" href="../index.html">
                <p>首页</p>
            </a>
        </li>
        <li>
            <a class="find" href="../find/index.html">
                <p>发现</p>
            </a>
        </li>
        <li>
            <a class="camera" href="../ranking/index.html">
                <p>合拍榜</p>
            </a>
        </li>
        <li class="active">
            <a class="person" href="user_login.html">
                <p>我的</p>
            </a>
        </li>
    </ul>
</footer>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script>
    function tabs(name) {
        $(".user-order-db").removeClass('user-order-db');
        $(".now").removeClass('now');
        $("#" + name).toggleClass('now');
        if (name === 'all') {
            $(".user-order-list>div").toggleClass('user-order-db');
        } else {
            $("." + name).toggleClass('user-order-db');
        }
    }

    $(function () {
        var $vocation = $('#vocation_li');
        $vocation.on('click', function () {
            $(".vocation").toggleClass('dialog-show');
        });

        var $close = $(".close");
        $close.on('click', function () {
            $(".dialog").removeClass('dialog-show');
        });

        var $region = $('#region_li');
        $region.on('click', function () {
            $(".region").toggleClass('dialog-show');
        });
        $(":radio").click(function () {
            $("#vocation_val").val($(this).val());
            $(".dialog").removeClass('dialog-show');
        });

    })
</script>
</body>
</html>
